<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Document</title>
		<!--<link type="text/css" href="./demo(1).css" rel="stylesheet" media="all">-->
		<link th:href="@{/css/crollpane/jquery.jscrollpane.css}" rel="stylesheet"/>

		<div th:include="include :: footer"></div>
		<!--<script th:src="@{/js/crollpane/jquery.jscrollpane.min.js}"></script>-->
		<script type="text/javascript">
            var prefix = ctx + "system/batch";
            $(function() {
                $('.b_left').on('click', 'li', function() {
                    var scale =Number( $(this).attr('scale') ) + 1;
					var element = $('.b_right .jspPane li[scale = '+scale+']');
					if(element && element[0]){
                        element.before($(this));
					}else{
                    	$('.b_right .jspPane').append($(this));
                    }
                });
                $('.b_right').on('click', 'li', function() {
                    var scale =Number( $(this).attr('scale') ) + 1;
                    var element = $('.b_left .jspPane li[scale = '+scale+']');
                    if(element && element[0]){
                        element.before($(this));
                    } else {
                        $('.b_left .jspPane').append($(this));
                    }
                });
                $('#login').click(function() {

                    var temp = '';
                    var text = $('.b_right li');

                    for(var i = 0; i < text.length; i++) {
                        var val = $(text[i]).html();
                        if(val != '') {
                            temp += val + ',';
                        }
                    };
                    var temps = temp.substring(0, temp.length - 1);
                    if(temp == '') {
                        alert('请点击左侧进行选择！！');
                    } else {
                        alert('您的选择为：' + temps);
                    }

                });

                function rolling() {
                    var bars = '.jspHorizontalBar, .jspVerticalBar';
                    $('.box>ul').bind('jsp-initialised', function(event, isScrollable) {
                        $(this).find(bars).hide();
                    }).jScrollPane().hover(
                        function() {
                            $(this).find(bars).stop().fadeTo('fast', 0.9);
                        },
                        function() {
                            $(this).find(bars).stop().fadeTo('fast', 0);
                        }
                    );
                }

            });

			//dialog 确定回调方法
            function submitHandler() {
                var temp = '';
                var text = $('.b_right li');

                for(var i = 0; i < text.length; i++) {
                    var val = $(text[i]).html();
                    if(val != '') {
                        temp += val + ',';
                    }
                };
                var temps = temp.substring(0, temp.length - 1);
                if(temp == '') {
                   $.modal.alert('请点击左侧进行选择！！');
                } else {
                    // $.operate.post(prefix + "/back/fileds", temps);
					//filedInput  回传TEMPS至父页面filedInput对象中
                    parent.$("#filedInput").val(temps);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
            }

		</script>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
				background: #fff;
			}
			
			ul,
			li {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.big {
				width: 400px;
				height: 290px;
				margin: 50px auto;
			}
			
			.one {
				width: 100%;
				height: 30px;
				line-height: 30px;
			}
			
			.bottom {
				width: 100%;
				height: 60px;
				text-align: center;
				margin-top: 20px;
				line-height: 30px;
			}
			
			.bottom input {
				padding: 4px 12px;
				cursor: pointer;
			}
			
			.pleaseSelect {
				float: left;
				width: 40%;
			}
			
			.alreadyChoose {
				margin-left: 20%;
				float: left;
				width: 40%;
			}
			
			.box {
				width: 400px;
				height: 200px;
				overflow: hidden;
				background: #f0f0f0;
			}
			
			.b_left {
				width: 40%;
				height: 100%;
				float: left;
			}
			
			.b_right {
				width: 40%;
				height: 100%;
				float: left;
			}
			
			.box li {
				width: 96%;
				padding: 0 4%;
				height: auto;
				margin: 0;
				line-height: 26px;
				cursor: pointer;
			}
			
			.box li:hover {
				background: #ccc;
			}
			
			.b_center {
				width: 20%;
				float: left;
				text-align: center;
				line-height: 200px;
				font-size: 30px;
				height: 100%;
				background: #fff;
			}
		</style>
	</head>

	<body>
		<div class="big">
			<div class="one">
				<div class="pleaseSelect">请选择：</div>
				<div class="alreadyChoose">已选择：</div>
			</div>
			<div class="box">
				<ul class="b_left jspScrollable" tabindex="0" style="overflow: hidden; padding: 0px; width: 160px;">

					<div class="jspContainer" style="width: 160px; height: 200px;overflow:auto;">
						<div class="jspPane" style="padding: 0px; width: 151px; top: 0px;"  >
							<li  th:each="filed,filedStat : ${fileds}"  th:text="${filed}"  th:scale = "${filedStat.index}" ></li>
						</div>
						<div class="jspVerticalBar" style="display: block; opacity: 0;">
							<div class="jspCap jspCapTop"></div>
							<div class="jspTrack" style="height: 200px;">
								<div class="jspDrag" style="height: 154px;">
									<div class="jspDragTop"></div>
									<div class="jspDragBottom"></div>
								</div>
							</div>
							<div class="jspCap jspCapBottom"></div>
						</div>
					</div>
				</ul>
				<div class="b_center">
					&lt;&gt;
				</div>
				<ul class="b_right" style="overflow: hidden; padding: 0px; width: 160px;">

					<div class="jspContainer" style="width: 160px; height: 200px;overflow:auto;">
						<div class="jspPane" style="padding: 0px; top: 0px; width: 160px;">
						</div>
					</div>
				</ul>
			</div>
			<!--<div class="bottom">-->
				<!--<input type="button" value="确定" id="login">-->
			<!--</div>-->
		</div>

	</body>

</html>